import React, { Component } from 'react'
import { Popup, Cell, Button, Input, Form } from 'react-vant';

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      visible: false
    }
  }
  render() {
    return (
      <div>
        <p>test</p>
        <Cell title="展示弹出层" isLink onClick={() => this.setState({ visible: true })} />
        <Popup
          visible={this.state.visible}
          onClose={() => {
            this.setState({
              visible: false
            })
          }}
        >
          <div style={{ padding: '30px 50px' }}>内容</div>
        </Popup>
        <Form
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType="submit" type="primary" block>
                提交
              </Button>
            </div>
          }
        >
          <Form.Item
            tooltip={{
              message:
                'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
            }}
            intro="确保这是唯一的用户名"
            rules={[{ required: true, message: '请填写用户名' }]}
            name="username"
            label="用户名"
          >
            <Input placeholder="请输入用户名" />
          </Form.Item>
          <Form.Item rules={[{ required: true, message: '请填写密码' }]} name="password" label="密码">
            <Input placeholder="请输入密码" />
          </Form.Item>
        </Form>
      </div>
    )
  }
}
